<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容只能替换一次</title>
</head>
<body>
<div id="change" class="change">
    <h1 data-once="info" style="background-color: red"></h1>
</div>

<script>
    let info = 'Hello, Vue'

    function func() {
        // step1、 获取目标元素
        let element = document.querySelector("#change > h1");

        // step2、 获取属性的值
        let attributeValue = element.getAttribute("data-once");

        // step3、修改元素的内容
        element.textContent = eval(attributeValue)

        // 更绝的方式，修改完毕后直接删除属性。
    }

    func()

    info = "Hello, World!"
    func()

    let status = true

    function execute_once() {
        if (status) {
            func()
            status = !status
        }
    }

    info = "Hello, Vue"
    execute_once()

    info = "Hello, Vue" + "!"
    execute_once()

</script>
</body>
</html>